<template>
	<view>
		<view class="top_mouble">
			<image class="top_mouble_pic" :src="$Config.HOST+'/public'+detail.thumb" mode=""></image>
			<view class="">
				<text class="top_mouble_title">{{detail.tag}}——{{detail.name}}</text>
				<text class="top_mouble_wz">加入带出行</text>
			</view>
		</view>
		<view class="rank">
			<view class="rank_title">
				<image class="rank_title_pic" src="../../../static/Country_img/redu.png" mode=""></image>
				<text class="rank_title_wz">热度排名:{{detail.id}}</text>
			</view>
			<view class="rank_content_mouble">
				<rich-text class="rank_content" :nodes="decodedDetail"></rich-text>
			</view>
		</view>
		<view class="active">
			<view class="active_top_mouble">
				<text class="active_title">热门活动</text>
			</view>
				<view class="active_bottom_mouble">
					<view class="active_content" v-for="(item,i) in active">
						<image class="active_content_pic" :src="$Config.HOST+'/public'+item.thump" mode=""></image>
						<view class="active_content_right">
							<text class="active_content_right_title">{{item.active_name}}</text>
							<text class="active_content_right_content">时间：{{item.time}}</text>
							<text class="active_content_right_content">地点：{{item.position}}</text>
						</view>
					</view>
				</view>
		</view>
		<view class="nearby">
			<view class="nearby_top">
				<text class="nearby_top_title">附近民宿</text>
				<view class="nearby_top_right">
					<text class="nearby_top_more">更多</text>
					<image class="nearby_top_you" src="../../../static/Specialty_detail/you.png" mode=""></image>
				</view>
			</view>
			<view class="nearby_bottom">
				<view class="nearby_bottom_mouble" v-for="(item,i) in homestay">
					<image class="nearby_bottom_pic" :src="$Config.HOST+'/public'+item.thumb" mode=""></image>
				</view>
			</view>
		</view>
		<view class="local">
			<view class="nearby_top">
				<text class="nearby_top_title">土特产推荐</text>
				<view class="nearby_top_right">
					<text class="nearby_top_more">更多</text>
					<image class="nearby_top_you" src="../../../static/Specialty_detail/you.png" mode=""></image>
				</view>
			</view>
			<view class="local_center">
				<view class="local_center_wz">
					<view class="tab_nav">
						<view v-for="(item,index) in items" :class="{'btna':count===index}" @tap="change(index)" :key="index">{{item}}</view>
					</view>
					<view class="tab_con">
						<view class="discount_info" :class="{dis:count ===1}">
							<navigator url="/pages/Country/Specialty_detail/Specialty_detail">
								<view class="local_center_tecan">
									<image class="local_center_tecan_pic" src="../../../static/Country_img/niurou.png" mode=""></image>
									<text class="local_center_tecan_title">醉仙麻辣牛肉</text>
								</view> 
							</navigator>
						</view>
						<view class="discount_info" :class="{dis:count ===0}">
							<view class="local_center_tecan">
								<image class="local_center_tecan_pic" src="../../../static/Country_img/bjt.png" mode=""></image>
								<text class="local_center_tecan_title">香菜炒鸡堡</text>
							</view> 
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	let id;
	export default {
		data() {
			return {
				items:["一方人","农掌柜"],
				count:0,
				detail:[],
				content:'',
				active:[],
				homestay:[]
			}
		},
		onLoad(e) {
			id=e.id
			let that=this
			uni.request({ 
				url:'http://village.yqxbxb.com/api/villages/Villdetail?id='+id,
				method:'GET',
				success(res) {
					//console.log(res.data.data);
					that.detail=res.data.data;
					that.content = res.data.data.detail
				}
			})
			uni.request({
				url:'http://village.yqxbxb.com/api/villages/VillWithActivities?id='+id,
				method:'GET',
				success(res) {
					// console.log(res.data.data);
					that.active=res.data.data
				}
			})
			uni.request({
				url:'http://village.yqxbxb.com/api/villages/Villminsu?id='+id,
				method:'GET',
				success(res) {
					console.log(res);
					that.homestay = res.data.data
				}
			})
		},
		methods: {
			change(index){
				this.count=index;
			}
		},
		computed: {
			 decodedDetail() {
			      return this.content.replace(/&lt;|&gt;|&quot;|&amp;/g, match => {
			        switch(match) {
			          case '&lt;':
			            return '<';
			          case '&gt;':
			            return '>';
			          case '&quot;':
			            return '"';
			          case '&amp;':
			            return '&';
			        }
			      });
			    }
		}
	}
</script>

<style>
	page {
		  background-color:#e1e4e1; 
		}
		.top_mouble{
			width: 100%;
			height: 530rpx;
			background-color: white;
		}
		.top_mouble_pic{
		width: 100%;
		height: 470rpx;
		}
		.top_mouble_title{
		margin-left: 50rpx;
		}
		.top_mouble_wz{
			margin-left:150rpx;
			background-color:#1ADC1E;
			color: white;
			border-radius: 30rpx;
			font-size: 25rpx;
			padding: 5rpx;
		}
		.rank{
			width: 100%;
			height: 350rpx;
			background-color: white;
			margin-top: 20rpx;
		}
		.rank_title{
			
		}
		.rank_title_pic{
			width: 50rpx;
			height: 50rpx;
			margin-left: 50rpx;
		}
		.rank_title_wz{
			font-size: 35rpx;
			font-weight: bold;
			margin-left: 20rpx;
			
		}
		.rank_content_mouble{
			width: 600rpx;
			margin: 0 auto;
			text-indent: 2ex;
			line-height: 1.5;
		}
		.rank_content{
			font-size: 20rpx;
		}	
		.active_top_mouble{
			display: flex;
			justify-content: space-between;
			width: 100%;
			height: 50rpx;
			margin:10rpx auto 0;
			padding-bottom: 10rpx;
			background-color: white;
		}
		.active_bottom_mouble{
			width: 100%;
			background-color: white;
			padding-bottom: 10rpx;
			margin-bottom: 10rpx;
		}
		.active_content{
			width: 90%;
			margin: 0 auto;
			margin-bottom: 20rpx;
			display: flex;
			background-color:#e1e4e1 ;
			
		}.active_content_pic{
			width: 260rpx;
			height: 120rpx;
			border-radius: 15rpx;
		}
		.active_content_right{
			padding: 10rpx 30rpx 0 30rpx;
			display: flex;
			background-color: #E1E4E1;
			flex-direction: column;
		}
		.active_content_right_title{
			margin-bottom: 10rpx;
			font-size: 20rpx;
		}
		.active_content_right_content{
			font-size: 20rpx;
		}
		.active_title{
			margin-left: 50rpx;
			font-size: 38rpx;
		}
		.nearby_top{
			width: 100%;
			height: 50rpx;
			background-color: white;
			margin:10rpx auto 0;
			display: flex;
			justify-content: space-between;
		}
		.nearby_top_title{
			margin-left: 50rpx;
			font-size: 40rpx;
		}
		.nearby_top_more{
			line-height: 50rpx;
		}
		.nearby_bottom{
			width: 100%;
			background-color: white;
			margin: 0 auto;
			display: flex;
			justify-content: center;
			flex-wrap: wrap;
			
		}
		.nearby_bottom_pic{
			width:260rpx;
			height: 120rpx;
			margin: 10rpx;
			border-radius: 50rpx;
			flex-wrap: wrap;
		}
		.local_center_wz{
			width: 100%;
			height: 50rpx;
			background-color: white;
			margin: 0 auto;
		}.local_center_title{
			margin-left: 50rpx;
			font-size: 32rpx;
		}
		.local_center_tecan{
			width: 100%;
			background-color: white;
			display: flex;
			flex-direction: column;
			
		}
		.local_center_tecan_pic{
			width: 90%;
			height: 250rpx;
			margin: 0 auto;
		}
		.local_center_tecan_title{
			width: 90%;
			margin:auto;
		}
		.tab_nav{
		display: flex;
		justify-content: space-around;
		font-size: 35rpx;
		font-weight: bold;
		background-color: white;
		}
		.btna{ 
			display: flex;
			color: #1ADC1E; 
			background-color: #fff;
			border-bottom: 2px solid #1ADC1E;
			margin-bottom: 20rpx;
		}
		.dis{
			display: none;
		}
		.nearby_top_you{
			margin-top: 10rpx;
			width: 30rpx;
			height: 30rpx;
		}
		.nearby_top_right{
			display: flex;
		}
	</style>